---
import Icon from './Icon.astro';
import AccountNavigation from './Login/AccountNavigation.astro';
---

<div class='bg-slate-900 py-5 text-white sm:py-8'>
  <nav class='container flex items-center justify-between'>
    <a class='flex items-center text-lg font-medium text-white' href='/'>
      <Icon icon='logo' />
      <span class='ml-3'>roadmap.sh</span>
    </a>

    <!-- Desktop navigation items -->
    <ul class='hidden space-x-5 sm:flex sm:items-center'>
      <li>
        <a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a>
      </li>
      <li>
        <a href='/best-practices' class='text-gray-400 hover:text-white'
          >Best Practices</a
        >
      </li>
      <li>
        <a href='/guides' class='text-gray-400 hover:text-white'>Guides</a>
      </li>
      <li>
        <a href='/videos' class='text-gray-400 hover:text-white'>Videos</a>
      </li>
      <li>
        <AccountNavigation />
      </li>
    </ul>

    <!-- Mobile Navigation Button -->
    <button
      class='block cursor-pointer text-gray-400 hover:text-gray-50 sm:hidden'
      aria-label='Menu'
      show-mobile-nav
    >
      <Icon icon='hamburger' />
    </button>

    <!-- Mobile Navigation Items -->
    <div
      class='fixed top-0 bottom-0 left-0 right-0 z-40 flex hidden items-center bg-slate-900'
      mobile-nav
    >
      <button
        close-mobile-nav
        class='absolute top-6 right-6 block cursor-pointer text-gray-400 hover:text-gray-50'
        aria-label='Close Menu'
      >
        <Icon icon='close' />
      </button>
      <ul class='flex w-full flex-col items-center gap-2 md:gap-3'>
        <li>
          <a href='/roadmaps' class='text-xl hover:text-blue-300 md:text-lg'
            >Roadmaps</a
          >
        </li>
        <li>
          <a
            href='/best-practices'
            class='text-xl hover:text-blue-300 md:text-lg'>Best Practices</a
          >
        </li>
        <li>
          <a href='/guides' class='text-xl hover:text-blue-300 md:text-lg'
            >Guides</a
          >
        </li>
        <li>
          <a href='/videos' class='text-xl hover:text-blue-300 md:text-lg'
            >Videos</a
          >
        </li>
        <li id='profile-mobile-nav' class='hidden'>
          <a href='/profile' class='text-xl hover:text-blue-300 md:text-lg'
            >Profile</a
          >
        </li>
        <li id='settings-mobile-nav' class='hidden'>
          <a
            href='/settings/profile'
            class='text-xl hover:text-blue-300 md:text-lg'>Settings</a
          >
        </li>
        <li id='logout-mobile-nav' class='hidden'>
          <button class='text-xl text-red-300 hover:text-red-400 md:text-lg'
            >Logout</button
          >
        </li>
        <li>
          <a
            href='/signup'
            id='register-mobile-nav'
            class='text-xl text-red-300 hover:text-red-400 md:text-lg'
            >Register</a
          >
        </li>
      </ul>
    </div>
  </nav>
</div>

<script>
  import Cookies from 'js-cookie';
  import { TOKEN_COOKIE_NAME } from '../lib/constants';

  const profileLink = document.getElementById('profile-mobile-nav');
  const logoutButton = document.getElementById('logout-mobile-nav');
  const registerLink = document.getElementById('register-mobile-nav');
  const settingsLink = document.getElementById('settings-mobile-nav');

  const token = Cookies.get(TOKEN_COOKIE_NAME);

  if (token) {
    profileLink?.classList.remove('hidden');
    logoutButton?.classList.remove('hidden');
    registerLink?.classList.add('hidden');
    settingsLink?.classList.remove('hidden');
  } else {
    profileLink?.classList.add('hidden');
    logoutButton?.classList.add('hidden');
    settingsLink?.classList.add('hidden');
    registerLink?.classList.remove('hidden');
  }

  // Remove the token cookie and redirect to the homepage
  logoutButton?.addEventListener('click', () => {
    Cookies.remove(TOKEN_COOKIE_NAME);
    window.location.href = '/';
  });

  document.querySelector('[show-mobile-nav]')?.addEventListener('click', () => {
    document.querySelector('[mobile-nav]')?.classList.remove('hidden');
  });

  document
    .querySelector('[close-mobile-nav]')
    ?.addEventListener('click', () => {
      document.querySelector('[mobile-nav]')?.classList.add('hidden');
    });
</script>
